<template>
  <div
    @contextmenu.stop
    :class="{ 'is-hidden': !visible }"
    class="sidebar-trigger-container">
    <div class="sidebar-trigger-title">
      <p>{{ modalTitle }}</p>
      <i class="ri-close-fill" @click="closeModal"></i>
    </div>
    <div class="sidebar-trigger-content">
      <div v-show="currentId === 'style'">
        <!-- 概要样式 -->
         <SummaryStyle v-if="summaryStyle" :style="summaryStyle" />

        <!-- 关联线样式 -->
         <RelationLineStyle v-else-if="relationStyle" :style="relationStyle" />

         <!-- 主题样式 -->
        <NodeStyleSet
          v-if="gloabConfig && !summaryStyle && !relationStyle"
          :isRoot="currentSubject?.data.isRoot"
          :subjectStyle="subjectStyle"
          :gloabConfig="gloabConfig"
          :mapBackgroundColor="backgroundColor" />
      </div>

      <div class="theme-modal" v-show="currentId === 'theme'">
        <div class="theme-modal-item" v-for="item in themes" :key="item.name">
          <p>{{ item.name }}</p>
          <div
            class="theme-item"
            :class="{ active: currentTheme?.includes(item.key) }"
            @click="updateXmindTheme(item.key, item.dataList.length)">
            <div
              class="color"
              v-for="(itemName, idx) in item.dataList"
              :key="idx"
              :style="{ background: itemName.background }"></div>
            <div class="shadow" v-if="currentTheme?.includes(item.key)">
              <p>Switch</p>
            </div>
          </div>
        </div>
      </div>
      <div class="skeleton-modal" v-show="currentId === 'skeleton'">
        <div class="skeleton-modal-item" v-for="item in skeletons" :key="item.skeleton">
          <p>{{ item.name }}</p>
          <div
            @click="updateXmindSkeleton(`${item.skeleton}-${itemName.name}`)"
            :class="{ active: currentSkeleton === `${item.skeleton}-${itemName.name}` }"
            class="skeleton-item"
            v-for="itemName in item.dataList"
            :key="itemName.name">
            <img :src="itemName.icon" alt="skeleton">
            <img v-show="itemName.isRough" src="@/assets/images/xmind/skeleton/skeleton-hand-drawn.svg" alt="" class="hand-tag">
          </div>
        </div>
      </div>
    </div>
    <div class="sidebar-trigger-menu">
      <div
        v-for="item in triggerMenu"
        :key="item.id"
        @click="updateMenuModal(item.id, item.disabled)"
        :class="{ active: currentId === item.id, disabled: item.disabled }"
        class="sidebar-trigger-menu-item">
        <i :class="item.icon"></i>
        <p>{{ item.name }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, computed, watch } from 'vue'
import skeletons from '../config/skeleton'
import themes from '../config/theme'
import NodeStyleSet from './NodeStyleSet.vue'
import SummaryStyle from './SummaryStyle.vue'
import RelationLineStyle from './RelationLineStyle.vue'

const emits = defineEmits(['update-skeleton', 'update-theme'])
const props = defineProps({
  currentSubject: {
    type: Object,
    default: () => null
  },
  relationStyle: {
    type: Object,
    default: () => null
  },
  skeletonTheme: {
    type: Object,
    default: () => {
      return {}
    }
  },
  summaryStyle: {
    type: Object,
    default: () => null
  },
  gloabConfig: {
    type: Object,
    default: () => {
      return {}
    }
  },
  backgroundColor: String
})
const visible = ref(false)
const currentId = ref(null)
const currentSkeleton = ref(props.skeletonTheme.skeleton)
const currentTheme = ref(props.skeletonTheme.theme)
const triggerMenu = [
  { name: '样式', id: 'style', icon: 'ri-brush-2-line' },
  { name: '配色', id: 'theme', icon: 'ri-palette-line' },
  { name: '骨架', id: 'skeleton', icon: 'ri-node-tree' }
]

const modalTitle = computed(() => {
  return triggerMenu.find(o => o.id === currentId.value)?.name
})

const subjectStyle = computed(() => {
  if (props.currentSubject) {
    const c = props.currentSubject.style
    const { lineStyle, textStyle, shape } = c
    return {
      fontFamily: textStyle.fontFamily,
      fontSize: textStyle.fontSize,
      fontWeight: textStyle.fontWeight || 'normal',
      fontStyle: textStyle.fontStyle || 'normal',
      maxWidth: textStyle.maxWidth || 500,
      textDecoration: textStyle.textDecoration || 'none',
      textDirection: textStyle.textDirection || 'hor',
      align: textStyle.align || 'flex-start',
      textColor: textStyle.color,
      strokeColor: c.stroke,
      strokeStyle: c.strokeStyle || 'solid',
      strokeWidth: c.strokeWidth,
      backgroundColor: c.fill,
      branch: lineStyle.branch,
      dot: lineStyle.dot || 'solid',
      lineWidth: lineStyle.lineWidth,
      lineColor: lineStyle.fill,
      horizontalOutter: c.spacing,
      lineEndJoin: lineStyle.lineEndJoin,
      shape
    }
  }
  return null
})

function updateXmindSkeleton (skeleton) {
  if (currentSkeleton.value === skeleton) return
  currentSkeleton.value = skeleton
  emits('update-skeleton', skeleton)
}

function updateXmindTheme (theme, len) {
  if (currentTheme.value.includes(theme)) {
    const idx = Number(currentTheme.value.split('-')[1])
    currentTheme.value = `${theme}-${(idx + 1) % len}`
  } else {
    currentTheme.value = `${theme}-0`
  }
  emits('update-theme', currentTheme.value)
}

function updateMenuModal (id, disabled) {
  if (currentId.value === id || disabled) return
  visible.value = true
  currentId.value = id
}

watch(() => props.skeletonTheme, () => {
  currentSkeleton.value = props.skeletonTheme.skeleton
  currentTheme.value = props.skeletonTheme.theme
}, { deep: true })

function closeModal () {
  visible.value = false
  currentId.value = null
}
</script>

<style lang="scss">
.sidebar-trigger-container {
  position: fixed;
  height: 90vh;
  width: 320px;
  bottom: 20px;
  right: 0;
  display: flex;
  background: #fff;
  box-shadow: 2px 6px 12px 4px rgba(0, 0, 0, 0.1);
  flex-direction: column;
  transition: .2s;
  z-index: 7;
  cursor: url('~@/assets/images/default.png' ) 4 4, auto;
  border-radius: 6px 0 0 6px;
  &.is-hidden {
    transform: translateX(320px);
  }
  .sidebar-trigger-title {
    height: 42px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f1f1f1;
    align-items: center;
    padding: 0 12px;
    p {
      color: #000;
      font-size: 14px;
      color: #000;
       font-weight: 600;
      font-family: 黑体;
    }
    i {
      color: #999;
      font-size: 18px;
    }
  }
  .sidebar-trigger-content {
    height: 0;
    flex: 1;
    overflow-y: scroll;
    padding: 12px 20px;
    &::-webkit-scrollbar {
      display: none;
    }
    .skeleton-modal {
      padding: 0 12px;
      &-item {
        p {
          color: #949699;
          font-size: 14px;
          line-height: 50px;
          padding: 0 8px;
        }
        .skeleton-item {
          font-size: 0;
          box-shadow: inset 0px 0px 3px 0px rgba(255, 255, 255, 0.1), 0px 0px 3px 0px rgba(0, 0, 0, 0.14), 0px 8px 40px 0px rgba(0, 0, 0, 0.06);
          border-radius: 6px;
          border: 2px solid transparent;
          position: relative;
          & + .skeleton-item {
            margin-top: 12px;
          }
          img {
            width: 90%;
            display: block;
            margin: 0 auto;
          }
          &.active {
            box-shadow: 0px 4px 10px 2px #eaf2fe;
            border: 2px solid var(--el-color-primary);
          }
          .hand-tag {
            width: auto;
            position: absolute;
            top: 12px;
            left: 6px;
          }
        }
      }
    }
    .theme-modal {
      padding: 8px 12px;
      &-item {
        p {
          font-weight: 600;
          color: #27292A;
          margin-bottom: 8px;
        }
        .theme-item {
          display: grid;
          grid-template-columns: repeat(6, 1fr);
          margin: 8px 0 20px;
          grid-column-gap: 4px;
          height: 46px;
          padding: 8px 12px;
          border-radius: 4px;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.1);
          position: relative;
          overflow: hidden;
          cursor: url('~@/assets/images/default.png' ) 4 4, auto;
          .color {
            border-radius: 4px;
          }
          .shadow {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 9;
            background-color: rgba(0,0,0,0.16);
            display: flex;
            justify-content: center;
            align-items: center;
            display: none;
            user-select: none;
            p {
              color: #fff;
              margin-bottom: 0;
              opacity: 0.96;
            }
          }
          &.active {
            box-shadow: 0 0 0 3px var(--el-color-primary), 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.1);
          }
          &:hover {
            .shadow {
              display: flex;
            }
          }
        }
      }
    }
  }
  .sidebar-trigger-menu {
    position: absolute;
    bottom: 50%;
    left: 0;
    transform: translate(-115%, 50%);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    box-shadow: inset 0px 0px 3px 0px rgba(255, 255, 255, 0.1), 0px 0px 3px 0px rgba(0, 0, 0, 0.14), 0px 8px 40px 0px rgba(0, 0, 0, 0.06);
    padding: 12px 16px;
    &-item {
      text-align: center;

      color: #4c4c4c;
      user-select: none;
      i {
        font-size: 16px;
      }
      &:not(:last-child) {
        margin-bottom: 20px;
      }
      p {
        font-size: 12px;
      }
      &.active {
        color: var(--el-color-primary);
      }
      &.disabled {
        opacity: .6;
        cursor: not-allowed;
      }
    }
  }
}
</style>
